<template>
  <div>
<ul>
  <li v-for="item in list">
<p>姓名：{{item.name}}</p>
<p>年龄：{{item.age}}</p>
  </li>
</ul>
<table border="1">
  <tr bgcolor="purple">
    <td>用户借款编号</td>
    <td>借款用户帐号</td>
    <td>借款款项名称</td>
    <td>借款金额</td>
    <td>剩余还款本金</td>
  </tr>
  <tr v-for="item in biao">
    <td>{{item.hao}}</td>
    <td>{{item.zhang}}</td>
    <td>{{item.xiang}}</td>
    <td>{{item.jin}}</td>
    <td>{{item.huan}}</td>
  </tr>
</table>
<input type="text" v-model="s">
      <p>{{ s }}</p>
  </div>
</template>

<script setup lang="ts">
import { reactive,toRefs,ref } from 'vue';

// 双向绑定
const s = ref("数据双向绑定演示");
let data=reactive({
  list:[
    {name:'张大',age:21},
    {name:'李尔',age:20},
    {name:'刘珊',age:22},
    {name:'钱嗣',age:25},
    {name:'赵武',age:24},
  ],
  biao:[
  {hao:1,zhang:'zhangsan',xiang:'八维助学金',jin:3000,huan:1000},
  {hao:2,zhang:'lisi',xiang:'八维助学金',jin:2000,huan:0}
  ]
})
let {list,biao}=toRefs(data)
</script>

<style scoped>
  ul{
    list-style: none;
  }
  li{
    margin-bottom: 40px;
  }
</style>